<template>
  <div id="mine">
    <van-row class="info">
      <van-col class="userinfo" span="12">
        <van-image
          round
          width="40px"
          height="40px"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <!-- <van-uploader v-model="fileList" name="image" :after-read="afterRead" /> -->
        <span
          @click="islog ? '' : goto('/login')"
          v-text="islog ? userinfo.user_name : '请登录'"
        ></span>
      </van-col>
      <van-col class="setting" span="12">
        <van-icon name="scan" size="30" />
        <van-icon @click="goto('/setting')" name="setting-o" size="30" />
      </van-col>
    </van-row>
    <van-grid :border="false" :column-num="5">
      <van-grid-item dot>
        <h6>￥0</h6>
        <p>余额</p>
      </van-grid-item>
      <van-grid-item>
        <h6>0</h6>
        <p>优惠券</p>
      </van-grid-item>
      <van-grid-item>
        <h6>0</h6>
        <p>红包</p>
      </van-grid-item>
      <van-grid-item dot>
        <h6>0</h6>
        <p>积分</p>
      </van-grid-item>
      <van-grid-item>
        <h6>0</h6>
        <p>礼品卡</p>
      </van-grid-item>
    </van-grid>
    <p class="cart">
      <img src="../assets/loginimg/cart.jpg" alt="" />
    </p>
    <div class="total">
      <van-grid :border="false" :column-num="5">
        <van-grid-item
          icon="orders-o"
          text="全部订单"
          dot
          @click="goto('/orders')"
        />
        <van-grid-item icon="paid" text="待付款" badge="3" />
        <van-grid-item icon="coupon-o" text="待发货" badge="4" />
        <van-grid-item icon="logistics" text="已发货" badge="3" />
        <van-grid-item icon="comment-o" text="待评价" />
      </van-grid>
    </div>
    <!-- 我的服务 -->
    <div class="service">
      <h2>我的服务</h2>
      <van-grid :column-num="5" :border="false">
        <van-grid-item text="收藏">
          <template #icon>
            <van-icon size="28" color="#ff8460" name="star-o" />
          </template>
        </van-grid-item>
        <van-grid-item text="足迹" dot>
          <template #icon>
            <van-icon size="28" color="#ff8460" name="bulb-o" />
          </template>
        </van-grid-item>
        <van-grid-item text="退换售后">
          <template #icon>
            <van-icon size="28" color="#ff8460" name="refund-o" />
          </template>
        </van-grid-item>
        <van-grid-item text="会员">
          <template #icon>
            <van-icon size="28" color="#ff8460" name="vip-card-o" />
          </template>
        </van-grid-item>
        <van-grid-item text="客服">
          <template #icon>
            <van-icon size="28" color="#ff8460" name="service-o" />
          </template>
        </van-grid-item>
        <van-grid-item text="超惠购">
          <template #icon>
            <van-icon size="28" color="#ff8460" name="award-o" />
          </template>
        </van-grid-item>
        <van-grid-item text="优先购">
          <template #icon>
            <van-icon size="28" color="#ff8460" name="bullhorn-o" />
          </template>
        </van-grid-item>
        <van-grid-item text="企业采购">
          <template #icon>
            <van-icon size="28" color="#ff8460" name="hotel-o" />
          </template>
        </van-grid-item>
        <van-grid-item text="我的竞拍">
          <template #icon>
            <van-icon size="28" color="#ff8460" name="hotel-o" />
          </template>
        </van-grid-item>
        <van-grid-item />
      </van-grid>
    </div>
    <div class="tixian">
      <img src="../assets/loginimg/tixian.jpg" alt="" />
      <van-grid :column-num="5" :border="false">
        <van-grid-item text="邀请有礼">
          <template #icon>
            <van-icon size="28" color="#ff8460" name="gift-card" />
          </template>
        </van-grid-item>
        <van-grid-item text="免费领券">
          <template #icon>
            <van-icon size="28" color="#ff8460" name="invitation" />
          </template>
        </van-grid-item>
        <van-grid-item text="心愿树 ">
          <template #icon>
            <van-icon size="28" color="#ff8460" name="cluster" />
          </template>
        </van-grid-item>
        <van-grid-item icon="photo-o" text="心愿城">
          <template #icon>
            <van-icon size="28" color="#ff8460" name="location" />
          </template>
        </van-grid-item>
        <van-grid-item text="邀新拼团">
          <template #icon>
            <van-icon size="28" color="#ff8460" name="friends" />
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="../assets/loginimg/mine1.png" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/loginimg/mine2.png" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/loginimg/mine3.png" alt="" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
  name: "Mine",
  data() {
    return {
      fileList: [
        {
          url: "",
        },
      ],
    };
  },
  created() {
  },
  methods: {
    goto(url) {
      this.$router.push({
        path: url,
        query: {
          targeturl: this.$route.fullPath,
        },
      });
    },
  },
  computed: {
    ...mapState("user", ["userinfo"]),
    ...mapGetters("user", ["islog"]),
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
#mine {
  background-color: #eeeeee;
  padding: 0 10px;
  box-sizing: border-box;
}
.info {
  padding: 20px;
  box-sizing: border-box;
  background-color: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .userinfo {
    display: flex;
    align-items: center;
    span {
      font-size: 14px;
      color: #333;
      font-weight: 900;
      margin-left: 10px;
    }
  }
  .setting {
    display: flex;
    justify-content: flex-end;
    .van-icon {
      margin-left: 10px;
    }
  }
}
.cart {
  width: 100%;
  height: 50px;
  margin: 10px 0;
  img {
    width: 100%;
    height: 100%;
  }
}
.total {
  width: 100%;
  height: 99px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  .van-grid {
    width: 100%;
  }
}
.service {
  height: 200px;
  background-color: #fff;
  margin-top: 10px;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  h2 {
    text-align: left;
    font-size: 14px;
  }
}
.tixian {
  width: 100%;
  height: 150px;
  background-color: #fff;
  border-radius: 10px;
  margin-top: 10px;
  padding: 10px;
  box-sizing: border-box;
  img {
    width: 100%;
  }
}
.my-swipe {
  margin: 10px 0;
  .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 100px;
    text-align: center;
    img {
      width: 100%;
      height: 100px;
      border-radius: 10px;
    }
  }
}
</style>
